<template>
	<view class="shebei">
		<div id="video-container"></div>
		<view class="listWrapper">
			<view class="item" v-bind:class="{itemsel:curindex==index}" v-for="(item,index) in dataList" v-on:click="onItem(index)">
				<view>{{item.Describe}}</view>
			</view>
		</view>
	</view>
</template>


<script>
	import http from "../../common/http.js"
	import EZUIKit from "ezuikit-js"
	export default {
		data() {
			return {
				storeid:0,
				dataList:[],
				url:"",
				curindex:0,
				isActive:true,
				s:"",
				e:""
			}
		},
		onLoad(options) {
			this.storeid = options.storeid
			this.s = options.s
			this.e = options.e
			this.refreshDataList()
		},
		methods: {
			refreshDataList() {
				var self = this
				http.get("/store/videos", {"storeid":this.storeid}, (r)=>{
					self.dataList = r
					self.prePlay()
				})
			},
			prePlay(){
				var item = this.dataList[this.curindex]
				var url = "ezopen://open.ys7.com/"+item.Devicesn+"/1.hd.live"
				this.doPlay(url, item.Accesstoken)
				// http.post("https://open.ys7.com/api/lapp/v2/live/address", {
				// 	"accessToken":item.Accesstoken,
				// 	"deviceSerial":item.Devicesn
				// },(r)=>{
				// 	console.log(r.Url)
				// 	// 'ezopen://open.ys7.com/F44096840/1.hd.live'
				// })
			},
			doPlay(url, at){
				var playUrl = url
				var template = "security"
				if (this.s.length > 0) {
					template = "simple"
					playUrl = url+"?begin="+this.s+"&end="+this.e
					playUrl = playUrl.replace("hd.live", "rec")
					console.log(playUrl)
				}
				var self = this
				var player = new EZUIKit.EZUIKitPlayer({
					id: 'video-container', // 视频容器ID
					accessToken: at,
					url: playUrl,
					template: template, // simple - 极简版;standard-标准版;security - 安防版(预览回放);voice-语音版；
				})
				player.play()
				
			},
			onItem(index) {
				if (index == this.curindex) {return}
				this.curindex = index
				this.prePlay()				
			}
		}
	}
</script>

<style>
	page {
		background-color: #F3F3F2;
	}
	.listWrapper {
		margin-top: 10px;
		display: flex;
		padding: 10px 10px;
	}
	.item {
		margin-bottom: 10px;
		padding: 10px 15px;
		box-sizing: border-box;
		background-color: white;
		margin-right: 10px;
		border-radius: 20px;
		
	}

	#video-container {
		width: 100%;
		height:300px;
		background-color: black;
	}
	.itemsel {
		background-color: #75D7E0;
		color: white;
	}
</style>
